<template>
  <div class="admin-container">
    <!-- 顶部导航 -->
    <header class="admin-header">
      <div class="header-left">
        <h1>商品管理系统后台</h1>
      </div>
      <div class="header-right">
        <div style="display: flex; align-items: center; gap: 8px;">
          <img 
            :src="userAvatar || getDefaultAvatar(authStore.userName)" 
            alt="用户头像" 
            style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;"
          />
          <span>你好，{{ userName }}</span>
        </div>
        <el-button type="primary" @click="logout">退出登录</el-button>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="admin-main">
      <!-- 侧边菜单 -->
      <aside class="admin-sidebar">
        <el-menu
          :default-active="currentRoute"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard">
            <el-icon><HomeFilled /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-sub-menu index="goods">
            <template #title>
              <el-icon><ShoppingBag /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="goods/list">商品列表</el-menu-item>
            <el-menu-item index="categories/list">分类管理</el-menu-item>
            <el-menu-item index="standards/list">规格管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="orders">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="orders/list">订单列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="users">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="users/list">用户列表</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="comments/list">
            <el-icon><Message /></el-icon>
            <span>评论管理</span>
          </el-menu-item>
          <el-menu-item index="icons/list">
            <el-icon><Setting /></el-icon>
            <span>图标管理</span>
          </el-menu-item>
          <el-menu-item index="files/list">
            <el-icon><Document /></el-icon>
            <span>文件管理</span>
          </el-menu-item>
          <el-menu-item index="slides/list">
            <el-icon><Picture /></el-icon>
            <span>轮播图管理</span>
          </el-menu-item>
        </el-menu>
      </aside>

      <!-- 内容区域 -->
      <main class="admin-content">
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../../stores/auth';
import { ElMessage } from 'element-plus';
import {
  HomeFilled,
  ShoppingBag,
  Document,
  User,
  Message,
  Setting,
  Picture
} from '@element-plus/icons-vue';

const router = useRouter();
const authStore = useAuthStore();

// 计算当前路由
const currentRoute = computed(() => {
  const path = router.currentRoute.value.path;
  if (path === '/admin') return 'dashboard';
  if (path === '/admin/goods') return 'goods/list';
  if (path === '/admin/category') return 'categories/list';
  if (path === '/admin/order') return 'orders/list';
  if (path === '/admin/user') return 'users/list';
  if (path === '/admin/comment') return 'comments/list';
  if (path === '/admin/standard') return 'standards/list';
  if (path === '/admin/icon') return 'icons/list';
  if (path === '/admin/files') return 'files/list';
  if (path === '/admin/slides') return 'slides/list';
  return 'dashboard';
});

// 获取用户名
const userName = computed(() => authStore.userName || '用户');

// 获取用户头像
const userAvatar = computed(() => authStore.userAvatar);

// 获取默认头像
const getDefaultAvatar = (name: string) => {
  return `https://api.dicebear.com/7.x/personas/svg?seed=${name || 'user'}`;
};

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  switch (index) {
    case 'dashboard':
      router.push('/admin');
      break;
    case 'goods/list':
      router.push('/admin/goods');
      break;
    case 'categories/list':
      router.push('/admin/category');
      break;
    case 'orders/list':
      router.push('/admin/order');
      break;
    case 'users/list':
      router.push('/admin/user');
      break;
    case 'comments/list':
      router.push('/admin/comment');
      break;
    case 'standards/list':
      router.push('/admin/standard');
      break;
    case 'icons/list':
      router.push('/admin/icon');
      break;
    case 'files/list':
      router.push('/admin/files');
      break;
    case 'slides/list':
      router.push('/admin/slides');
      break;
    default:
      break;
  }
};

// 退出登录
const logout = () => {
  authStore.logout();
  router.push('/');
  ElMessage.success('退出登录成功');
};

// 组件挂载时的初始化操作
onMounted(() => {
  // 登录检查已在路由守卫中处理
  console.log('管理后台页面已加载');
});
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left h1 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.admin-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.admin-sidebar {
  width: 200px;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.admin-sidebar .el-menu {
  height: 100%;
  border-right: none;
}

.admin-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>